<script lang="ts" setup>
	//添加地址
	import { reactive, ref } from 'vue'
	// import city from '@/sheng_shi_xian_data.json'
	import {
		onLoad,
		onReachBottom,
		onUnload
	} from '@dcloudio/uni-app';
	import {
		useRouter
	} from 'uni-mini-router'
	import {
		getCurrentInstance
	} from 'vue'
	import {
		userStore
	} from '@/pinia';
	let router = useRouter()
	const userStoreInfo = userStore();
	const {
		proxy,
	} = getCurrentInstance()
	onLoad((option) => {
		console.log(option);
		// if (option.id) {
		// 	navTit.value = '编辑地址'
		// 	editId.value = option.id
		// 	// getEditDetail()
		// } else {
		// 	getAddressTree()
		// }
		getAddressTree()
	})
	let navTit = ref('工作地点')
	let editId = ref(null)
	let formA = ref({
		name: '',
		phone: '',
		address: '',
		addressDetail: ''
	})
	let radiovalue = ref('')
	let addressThree = ref([])
	const addressChecked = (e) => {
		//选择地址
		console.log(e);
		addressThree.value = e.detail.value
		formA.value.address = e.detail.value[0].text + e.detail.value[1].text + e.detail.value[2].text
	}
	let city = ref([])
	const getAddressTree = () => {
		//获取地区
		proxy.$req('GET', proxy.$api.getAddressTree, {}).then((res) => {
			city.value = res.result
		})
	}
	const getEditDetail = () => {
		//获取详情编辑
		proxy.$req('GET', proxy.$api.addressDetail, {
			id: editId.value
		}).then((res) => {
			console.log(res);
			formA.value.name = res.result.realName
			formA.value.phone = res.result.phone
			addressThree.value.push({ text: res.result.province })
			addressThree.value.push({ text: res.result.city })
			addressThree.value.push({ text: res.result.district })
			addressThree.value[2].value = res.result.cityId
			formA.value.address = res.result.province + res.result.city + res.result.district
			formA.value.addressDetail = res.result.detail
			radiovalue.value = res.result.isDefault == 1 ? ['设为默认收货地址'] : ''
			getAddressTree()
		})
	}
	const addAddress = () => {
		if (!formA.value.address) {
			uni.showToast({
				title: '请选择地点',
				icon: 'none'
			})
			return
		}
		if (!formA.value.addressDetail) {
			uni.showToast({
				title: '请输入详细地址',
				icon: 'none'
			})
			return
		}
		let params = {
			pageType:'jobAddress',
			provinceId:addressThree.value[0].value,
			province: addressThree.value[0].text,
			city: addressThree.value[1].text,
			cityId: addressThree.value[1].value,
			areaName: addressThree.value[2].text,
			areaId: addressThree.value[2].value,	
			address:formA.value.addressDetail
			// comprehensiveSalaryType:state.comprehensiveSalaryType,
			// comprehensiveSalaryStart:state.comprehensiveSalaryStart,
			// comprehensiveSalaryEnd:state.comprehensiveSalaryEnd,
			// basicBenefits:state.basicBenefits.length>0?state.basicBenefits.join():'',
		}
		router.push({
			name:'addJob',
			params:params
		})
	}
</script>
<template>
	<u-navbar :placeholder="true" :title="navTit" :autoBack="true">
		<!-- <template #right>
			删除
		</template> -->
	</u-navbar>
	<view class="formBox">
		<u--form labelPosition="left" :model="formA" ref="form" labelWidth="150rpx">
			<!-- <u-form-item class="formItem" label="所在地区">
				<u--input style="padding:0 30rpx;" class="input" v-model="formA.num" border="none" disabledColor="#fff"
					placeholder="请输入所在地区"></u--input>
			</u-form-item> -->
			<u-form-item class="formItem" label="地址" prop="companyAddress">
				<uni-data-picker class="input" v-model="formA.address" :localdata="city" popup-title="请选择" :map="{
					text:'name',
					value:'id',
				}" @change="addressChecked">
					<view :style="{color:formA.address?'#333':'rgba(0,0,0,0.25)'}">
						{{formA.address?formA.address:'请选择' }}
					</view>
				</uni-data-picker>
			</u-form-item>
			<u-form-item class="formItem" label="详细地址">
				<u--textarea style="padding:20rpx 30rpx;box-sizing: border-box;" class="textarea" border="none"
					v-model="formA.addressDetail" placeholder="请输入详细地址"></u--textarea>
			</u-form-item>
		</u--form>

	</view>
	<view class="addBox">
		<view class="addAddress" @click="addAddress">
			保存
		</view>
	</view>
</template>
<style lang="scss">
	.addBox {
		width: 750rpx;
		height: 164rpx;
		background: #FFFFFF;

		position: fixed;
		bottom: 0;
		padding: 30rpx;
		box-sizing: border-box;

		.addAddress {
			width: 686rpx;
			height: 88rpx;
			background: #CB645E;
			border-radius: 16rpx;
			line-height: 88rpx;
			text-align: center;
			margin: auto;
			color: white;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
	}

	.formBox {
		width: 686rpx;
		margin: 0 auto;

		.input {
			width: 500rpx;
			height: 96rpx;
			background: #F7F7F7;
			border-radius: 16rpx;
			padding-left: 20rpx;
			box-sizing: border-box;
			line-height: 96rpx;

		}

		.textarea {
			width: 500rpx;
			height: 176rpx;
			background: #F7F7F7;
			border-radius: 16rpx;
			box-sizing: border-box;

		}

		.formItem {
			// height: 100rpx;
			// border-bottom: 1rpx solid #d4d4d4;
		}
	}

	.save {
		width: 600rpx;
		margin: 90rpx auto;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		background-color: #e7e7e7;
	}
</style>